<template>
  <div class="container">
    <el-form 
      :model="ruleForm" 
      :rules="rules" 
      ref="ruleFormRef"
      label-width="100px" 
      class="search-form"
    >
      <el-form-item label="字段：" prop="key">
        <el-select 
          v-model="ruleForm.key" 
          style="width: 160px" 
          placeholder="请选择字段"
        >
          <el-option label="楼宇" value="buildingName" />
          <el-option label="宿舍" value="dormitoryName" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="值：" class="search-value">
        <el-input 
          v-model="ruleForm.value" 
          placeholder="请输入关键字" 
          style="width: 160px"
        />
        <el-button 
          type="primary" 
          icon="el-icon-search" 
          @click="submitForm(ruleFormRef)"
        >
          搜索
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="130" fixed />
      <el-table-column prop="buildingName" label="楼宇" width="180" />
      <el-table-column prop="dormitoryName" label="宿舍" width="180" />
      <el-table-column prop="studentName" label="学生" width="180" />
      <el-table-column prop="reason" label="原因" width="180" />
      <el-table-column prop="dormitoryAdminName" label="宿管" width="180" />
      <el-table-column prop="createDate" label="日期" width="180" />
    </el-table>

    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      v-model:current-page="currentPage"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getAbsentList, searchAbsent } from '@/api/absent'

const ruleFormRef = ref()
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(3)
const total = ref(0)

const ruleForm = ref({
  key: '',
  value: '',
  page: 1,
  size: 3
})

const rules = {
  key: [{ required: true, message: '请选择字段', trigger: 'change' }]
}

// 获取缺寝列表
const fetchAbsentList = async (page = 1) => {
  try {
    const res = await getAbsentList(page, pageSize.value)
    tableData.value = res.data
    total.value = res.total
  } catch (error) {
    console.error('获取缺寝列表失败:', error)
  }
}

// 搜索缺寝记录
const searchAbsentRecords = async () => {
  try {
    ruleForm.value.page = currentPage.value
    ruleForm.value.size = pageSize.value
    const res = await searchAbsent(ruleForm.value)
    tableData.value = res.data
    total.value = res.total
  } catch (error) {
    console.error('搜索失败:', error)
  }
}

// 提交表单
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      currentPage.value = 1
      if (ruleForm.value.value) {
        searchAbsentRecords()
      } else {
        fetchAbsentList()
      }
    }
  })
}

// 分页变化
const handlePageChange = (page) => {
  currentPage.value = page
  if (ruleForm.value.value) {
    searchAbsentRecords()
  } else {
    fetchAbsentList(page)
  }
}

// 初始化加载
onMounted(() => {
  fetchAbsentList()
})
</script>

<style scoped>
.container {
  margin: 60px 0 0 80px;
}

.search-form {
  margin-left: -40px;
}

.search-value {
  position: relative;
  left: 270px;
  top: -64px;
  width: 400px;
}

.pagination {
  margin-top: 20px;
  float: right;
}
</style>